import React, { useState } from "react";
import { Outlet } from "react-router-dom";
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme } from 'antd';
import CommonAside from "../components/commonAside";
import CommonHeader from "../components/commonHeader";
import CommonTag from "../components/commonTag";
import { useSelector } from "react-redux";
import { RouterAuth } from "../router/routerAuth"
const { Header, Sider, Content } = Layout;
const Main = () => {
    // const [collapsed, setCollapsed] = useState(false);
    //获取展开收起的状态
    const collapsed = useSelector(state => state.tab.isCollapse)
    return (
        <RouterAuth>
            <Layout className="main-container">
                <CommonAside collapsed={collapsed}></CommonAside>
                <Layout className="site-layout">
                    <CommonHeader collapsed={collapsed}></CommonHeader>
                    <CommonTag></CommonTag>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                           
                        }}
                    >
                        <Outlet></Outlet>
                    </Content>
                </Layout>
            </Layout>
        </RouterAuth>

    );
};


export default Main;